/**
 * #info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/08
 *@description  row  component  行组件
 */
import config from '../../../config/config.js'

/**
 * #item
 *
 * @type aty-row
 * @cn   行
 * @menu 布局
 * @stPlugin true
 * @stContainer false
 * @children [aty-col]
 */
// module
const module = {
  name: config.prefix + '-row',
  props: {
    /**
     * #property
     *
     * @name type
     * @cn  布局模式
     * @type list
     * @options [flex]
     * @description 布局模式，可选值为flex或不选，在现代浏览器下有效
     */
    type: {
      validator (value) {
        return Artery.isOneOf(value, ['flex'])
      }
    },
    /**
     * #property
     *
     * @name align
     * @cn  垂直方向的对齐方式
     * @type list
     * @options [top,middle,bottom]
     * @description flex 布局下的垂直对齐方式，可选值为top、middle、bottom
     */
    align: {
      validator (value) {
        return Artery.isOneOf(value, ['top', 'middle', 'bottom'])
      }
    },
    /**
     * #property
     *
     * @name justify
     * @cn  水平排列方式
     * @type list
     * @options [start,end,center,space-around,space-between]
     * @description flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
     */
    justify: {
      validator (value) {
        return Artery.isOneOf(value, ['start', 'end', 'center', 'space-around', 'space-between'])
      }
    }
  },
  watch: {},
  data () {
    return {
      scope: {
        className: config.prefix + '-row',
        type: this.type,
        align: this.align,
        justify: this.justify
      }
    }
  },
  computed: {
    className () {
      return [
        this.scope.className,
        {
          [`${this.scope.className}-${this.type}`]: !!this.type,
          [`${this.scope.className}-${this.type}-${this.align}`]: !!this.align,
          [`${this.scope.className}-${this.type}-${this.justify}`]: !!this.justify
        }
      ]
    }
  }
}
export default module
